<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - panorama</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        html, body {
            background-color: #000;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>
<body>
<div id="container"></div>

<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>

<script>
    (function () {
        var camera, controls;
        var renderer;
        var scene;

        function init() {

            var container = document.getElementById( 'container' );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
            camera.position.z = 0.01;

            controls = new THREE.OrbitControls( camera );

            var textures = getTexturesFromAtlasFile( "images/sun_temple_stripe.jpg", 6 );

            var materials = [];

            for ( var i = 0; i < 6; i ++ ) {

                materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );

            }

            var material = getTextures();

            var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), material );
            skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, - 1 ) );
            scene.add( skyBox );

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {

            var textures = [];

            for ( var i = 0; i < tilesNum; i ++ ) {

                textures[ i ] = new THREE.Texture();

            }

            var imageObj = new Image();

            imageObj.onload = function() {

                var canvas, context;
                var tileWidth = imageObj.height;

                for ( var i = 0; i < textures.length; i ++ ) {

                    canvas = document.createElement( 'canvas' );
                    context = canvas.getContext( '2d' );
                    canvas.height = tileWidth;
                    canvas.width = tileWidth;
                    context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
                    textures[ i ].image = canvas
                    textures[ i ].needsUpdate = true;

                }

            };

            imageObj.src = atlasImgUrl;

            return textures;

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            renderer.render( scene, camera );

            requestAnimationFrame( animate );

        }


        function getTextures() {
            let uv = ["l","r","u","d","b","f"];
            let dir = "images/100000_0/";
            let jpg = ".jpg";
            let textureLoader = new THREE.TextureLoader();

            let materials = [];
            for(let i=0,len= uv.length; i<len; i++){
                materials.push(new THREE.MeshBasicMaterial( { map: textureLoader.load( dir+uv[i]+jpg ) } ));
            }

            return materials;
        }

        init();
        animate();
    })()
</script>
</body>
</html>